<template>
  <div>
    <!-- <group class="setting-group">
      <cell title="姓名" :value="userInfo.trueName"></cell>
      <cell title="联系方式" :value="userInfo.mobile"></cell>
      <selector title="选择关联合同" :options="list" v-model="contract" placeholder="请选择关联合同"></selector>
    </group> -->
    <ul class="myCertificate">
      <li v-for="(item, index) in datas" :key="index">
        <div class="myCertificate-conter">
          <cell title="出租人：" :value="item.fdName"></cell>
          <cell title="承租人：" :value="item.zkName"></cell>
          <cell title="合同编号：" :value="item.code"></cell>
          <!-- <cell title="备案登记号：" :value="item.code"></cell> -->
        </div>
        <div class="myCertificate-button">
          <x-button type="primary" link="" @click.native="submit(item.id)">生成</x-button>
        </div>
      </li>
      
    </ul>
    <!-- <section class="tip">
      <icon type="warn"></icon>
      用户可凭电子租赁凭证享受优先积分入户、入学、办理居住证等公共服务（备案仅能作为能否尽到注意义务的一个证据材料，不能直接创设减轻姓氏责任的依据）
    </section> -->
  </div>
</template>

<script>
import { Cell } from 'vux'
export default {
  name: 'myCertificate',
  data () {
    return {
      datas: [],
      contract: ''
    }
  },
  components: {
    Cell
  },
  created () {
    this.init()
  },
  methods: {
    init: function () {
      let _this = this
      let userInfo = JSON.parse(window.localStorage.getItem('userInfo'))
      this.mobile = userInfo.mobile
      let userId = userInfo.id
      this.$axiosPosting(this.$api.myContractForRenter, {userId: userId, page: '1', pageSize: '10'}).then(json => {
        if (json.code === '0000') {
          this.datas = json.data
          this.datas.map((item, index) => {
            _this.getUserInfoById(item.partyAId, index, 'fdName')
            _this.getUserInfoById(item.partyBId, index, 'zkName')
          })
        } else {
          _this.$vux.toast.text(json.msg)
        }
      })
    },
    submit (id) {
      this.contract = id
      let _this = this
      _this.$vux.toast.text('正在开发中')
      // this.$vux.confirm.show({
      //   title: '提示',
      //   content: '合同备案后才可生成电子租赁凭证',
      //   confirmText: '备案',
      //   cancelText: '取消',
      //   onConfirm () {
      //     _this.createCode(id)
      //   }
      // })
    },
    // 生成二维码
    createCode: function () {
      if (this.contract === '') {
        this.$vux.toast.text('无有效合同')
        return false
      }
      this.$axiosPosting(this.$api.buildCard, {contractId: this.contract}).then(json => {
        if (json.code === '0000') {
          this.$router.push({path: 'credentialsCar', query: { myNumberPlate: JSON.stringify(json.data) }})
        } else {
          this.$vux.toast.text(json.msg)
        }
      })
    },
    getUserInfoById (id, index, whoName) {
      console.log(whoName)
      this.$axiosPosting(this.$api.getUserById, {userId: id}).then(res => {
        if (res.code === '0000') {
          this.$set(this.datas[index], whoName, res.data.trueName)
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
  .myCertificate {
    min-height: ~"calc(100vh - 87px)";
    li {
      padding: 19px 15px 4px;
      border-bottom: 6px solid #f4f4f4;
    }
    .myCertificate-conter{
      border: 1px solid #e5e5e5;
      margin-bottom: 12px;
      .weui-cell{
        div.weui-cell__ft{
          color: #000;
        }
      }
      .weui-cell:before{
        border: 0;
      }
    }
  }
  .tip {
    position: relative;
    margin-top: 0px;
    padding: 14px 20px 3px 40px;
    font-size: 12px;
    line-height: 1.8;
    text-align: justify;
    color: #999;
    background: #fff;
    // opacity: 0;
    // transition: all 3s;
   .weui-icon-warn {
      font-size: 16px;
      color: #ffd815;
      position: absolute;
      left: 13px;
      top: 16px;
    }
  }
</style>

<style lang="less">
  .myCertificate {
    // .weui-cells {
    //   margin-top: 0;
    // }
    // .weui-cell {
    //   padding: 0 0.75rem;
    //   line-height: 55px;
    // }
    // .weui-select {
    //   direction: rtl;
    //   height: 48px;
    //   line-height: 48px;
    // }
    .weui-cell {
      padding: 0px 16px 0 12px;
      font-size: 15px;
      margin-top: 10px;
      &:first-of-type {
        margin-top: 12px;
      }
      &:last-of-type {
        margin-bottom: 15px;
      }
    }
  }
</style>
